<template>
	<view class="fix-top-window">
		<view class="uni-header">
			<!-- 统计面包屑 -->
			<uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
			<view class="uni-group">
				<view class="uni-sub-title hide-on-phone"></view>
			</view>
		</view>
		<view style="height: 80px;background-color: #e8edf0;margin: 0;">
			<view style="padding-left: 10px;padding-top: 10px;">
				<el-text tag="b" truncated>数据统计中心</el-text>
				<el-row class="w-150px mb-2">
					<el-text truncated>用于展示当前系统中的统计数据、统计报表及重要实时数据</el-text>
				</el-row>
			</view>
		</view>
		<view class="uni-container">
			<view class="flex-container">
				<view class="dashboard">
					<view class="card">
						<img :src="warehouseIcon" alt="warehouse">
						<p>总仓库数<br><span id="totalWarehouses">1</span></p>
					</view>
					<view class="card">
						<img :src="materialIcon" alt="material">
						<p>总装备数<br><span id="totalEquipment">2</span></p>
					</view>
					<view class="card">
						<img :src="applicationIcon" alt="application">
						<p>总申请数<br><span id="totalApplications">4</span></p>
					</view>
					<view class="card">
						<img :src="userIcon" alt="user">
						<p>总管理员数<br><span id="totalAdmins">9</span></p>
					</view>
				</view>
			</view>

			<view style="display: flex;">
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
				</view>
				<view class="dashboard1">
					<!-- Card 1 -->
					<view class="card1">
						<i class="card-icon">
							<el-icon>
								<Edit />
							</el-icon>
						</i>
						<view class="card-title">今日入库</view>
						<view class="card-value">0</view>
						<view>
							<!-- <view class="progress-fill"></view> -->
							<el-progress :percentage="35" color="#28bb9c" :stroke-width=3 :show-text=false />
						</view>
					</view>

					<!-- Card 2 -->
					<view class="card1">
						<i class="card-icon">
							<el-icon>
								<Edit />
							</el-icon>
						</i>
						<view class="card-title">今日出库</view>
						<view class="card-value">0</view>
						<view>
							<el-progress :percentage="35" color="#28bb9c" :stroke-width=3 :show-text=false />
						</view>
					</view>

					<!-- Card 3 -->
					<view class="card1">
						<i class="card-icon">
							<el-icon>
								<Edit />
							</el-icon>
						</i>
						<view class="card-title">三日新增</view>
						<view class="card-value">0</view>
						<view>
							<el-progress :percentage="35" color="#28bb9c" :stroke-width=3 :show-text=false />
						</view>
					</view>

					<!-- Card 4 -->
					<view class="card1">
						<i class="card-icon">
							<el-icon>
								<Edit />
							</el-icon>
						</i>
						<view class="card-title">七日新增</view>
						<view class="card-value">0</view>
						<view>
							<el-progress :percentage="35" color="#28bb9c" :stroke-width=3 :show-text=false />
						</view>
					</view>

					<!-- Card 5 -->
					<view class="card1">
						<i class="card-icon">
							<el-icon>
								<Edit />
							</el-icon>
						</i>
						<view class="card-title">今日申请</view>
						<view class="card-value">0</view>
						<view>
							<el-progress :percentage="35" color="#28bb9c" :stroke-width=3 :show-text=false />
						</view>
					</view>

					<!-- Card 6 -->
					<view class="card1">
						<i class="card-icon">
							<el-icon>
								<Edit />
							</el-icon>
						</i>
						<view class="card-title">七日申请</view>
						<view class="card-value">0</view>
						<view>
							<el-progress :percentage="35" color="#28bb9c" :stroke-width=3 :show-text=false />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				warehouseIcon: "./static/resource/warehouse.png",
				userIcon: "./static/resource/user.png",
				materialIcon: "./static/resource/material.png",
				applicationIcon: "./static/resource/application.png",
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					dataLabel: false,
					dataPointShape: false,
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							min: 0,
							max: 150
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "custom",
							onShadow: true,
							animation: "horizontal"
						}
					}
				}

			}
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2024-12-19", "2024-12-20", "2024-12-21", "2024-12-22", "2024-12-23",
							"2024-12-24", "2024-12-25", "2024-12-26"
						],
						series: [{
								name: "出库数量",
								linearColor: [
									[
										0,
										"#1890FF"
									],
									[
										0.25,
										"#00B5FF"
									],
									[
										0.5,
										"#00D1ED"
									],
									[
										0.75,
										"#00E6BB"
									],
									[
										1,
										"#90F489"
									]
								],
								setShadow: [
									3,
									8,
									10,
									"#1890FF"
								],
								data: [15, 45, 15, 45, 15, 45, 15, 45]
							},
							{
								name: "申请数量",
								data: [55, 85, 55, 85, 55, 85, 55, 85]
							},
							{
								name: "新增数量",
								linearColor: [
									[
										0,
										"#FAC858"
									],
									[
										0.33,
										"#FFC371"
									],
									[
										0.66,
										"#FFC2B2"
									],
									[
										1,
										"#FA7D8D"
									]
								],
								setShadow: [
									3,
									8,
									10,
									"#FC8452"
								],
								data: [95, 125, 95, 125, 95, 125, 95, 125]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		},
	}
</script>

<style>
	.dashboard {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40px;
		width: 80%;
	}


	.card {
		background-color: white;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		width: 100px;
		text-align: center;
		padding: 15px;
	}

	.card img {
		height: 50px;
		margin-bottom: 10px;
	}

	.chart-container {
		width: 60%;
	}

	.charts-box {
		width: 70%;
	}

	.dashboard1 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		width: 36%;
	}

	.card1 {
		background-color: white;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		padding: 24px;
		text-align: left;
	}

	.card-icon {
		color: #28bb9c;
		font-size: 32px;
		margin-bottom: 12px;
	}

	.card-title {
		font-weight: normal;
		margin-bottom: 8px;
	}

	.card-value {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 16px;
	}

	.flex-container {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>